<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

{% load truncate_filter %}

  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta robots content="all" />
    <link rel="stylesheet"    href="/assets/style/main_page.css"  type="text/css" />
   <style type="text/css" rel="stylesheet">
    #mysubmit {font-weight: bold;}
   </style>
   
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAhcP5rdJ8gtI2Tvrvo88B3BR_tirkabJaindNc0FoauOGCOWtrBTLuwigpG4UD6tSDw3AxxYNXLmcVg"
    type="text/javascript">
    </script> 

<script type="text/javascript">

var markerGroups = {
{% for mtype in markertypes %}
  "{{mtype.safename}}": [] {% if not forloop.last %},{% endif %}
{% endfor %}
};

mapper = {
  load: function() {
    if (GBrowserIsCompatible()) {
      mapper.map = new GMap2(document.getElementById("innerMap"));
      mapper.map.setCenter(new GLatLng(52.1300, -0.2190), 15);
      mapper.map.setMapType(G_SATELLITE_MAP);
      var mapControl = new GMapTypeControl();
      
      mapper.map.addControl(mapControl);
      mapper.map.addControl(new GLargeMapControl());
      //mapper.map.enableScrollWheelZoom();  // This is annoying me, might turn it in to a check box
      GEvent.addListener(mapper.map, "click", function(overlay, latlng) {
        if (!latlng) return;
        mapper.addMarker(latlng.lat(),latlng.lng(),'Add new marker', {{ newmarkericon }}, '', '', 'newmarker', '', '', 'anewmarker', '', '');
      });   

      
      {% for marker in markers %}
      mapper.addMarker({{marker.lat}}, {{marker.lon}},
        '{{marker.name|escapejs}}','{{marker.itemtype.icon.id}}',
        '{{marker.link|escapejs}}','{{marker.thumbnail|escapejs}}',
        '{{marker.itemtype.safename}}', '{{marker.price}}',
        '{{marker.description|escapejs}}', '{{marker.id}}',
        '{{marker.creator|escapejs}}', '{{marker.public_phone}}'
        );
      {% endfor %}
    }
  },
    
  addMarker: function(lat, lng, mname, icon, link, thumb, type, price, descr, uid, creator, public_phone) {
    var that = this;
    var gicon = new GIcon();
    for (k in mapper.ICONS[icon]) {
      gicon[k] = mapper.ICONS[icon][k];
    };
    
    var marker = new GMarker(new GLatLng(lat, lng), 
      {draggable:true, bouncy:false, icon: gicon, title: mname});
    markerGroups[type].push(marker);
    marker.deleted  = false;
    marker.Plat     = lat;
    marker.Plng     = lng;
    marker.Pname    = mname;
    marker.Picon    = icon;
    marker.Ptype    = type;
    marker.Plink    = link;
    marker.Pthumb   = thumb;
    marker.Pprice   = price;
    marker.Pdescr   = descr;
    marker.Puid     = uid;
    marker.Pcreator = creator;
    marker.Ppubphone = public_phone;
    marker.remove   = function () {this.deleted = true; this.closeInfoWindow(); this.hide()};
    
    
    if (type == 'houseforsale') {
      marker.Htab1 = document.createElement("form");
       marker.Htab1.setAttribute("onsubmit", "return false");
      marker.Htab1.appendChild(document.createTextNode("Thumb URL:"));
      marker.Htab1.thumbInput = document.createElement("input");
        marker.Htab1.thumbInput.setAttribute("type","text");
        if (marker.Pthumb != null) {marker.Htab1.thumbInput.setAttribute("value",marker.Pthumb)}
        else {marker.Htab1.thumbInput.setAttribute("value", "None")};
        marker.Htab1.appendChild(marker.Htab1.thumbInput);
      marker.Htab1.appendChild(document.createElement("br"));
      marker.Htab1.delBtn = document.createElement("button");
        marker.Htab1.delBtn.setAttribute("type", "Button");
        marker.Htab1.delBtn.appendChild(document.createTextNode("Delete"));
        marker.Htab1.delBtn.onclick = function(){marker.remove()};
        marker.Htab1.appendChild(marker.Htab1.delBtn);
      marker.Htab1.undoBtn = document.createElement("button");
        marker.Htab1.undoBtn.setAttribute("type", "Button");
        marker.Htab1.undoBtn.appendChild(document.createTextNode("Undo"));
        marker.Htab1.appendChild(marker.Htab1.undoBtn);

      marker.Htab2 = document.createElement("form");
        marker.Htab2.setAttribute("onsubmit", "return false");
      marker.Htab2.appendChild(document.createTextNode("Name: "));
      marker.Htab2.nameInput=document.createElement("input");
        marker.Htab2.nameInput.setAttribute("type", "text");
        if (marker.Pname != null) {marker.Htab2.nameInput.setAttribute("value",marker.Pname)}
        else {marker.Htab2.nameInput.setAttribute("value","None")};
        marker.Htab2.appendChild(marker.Htab2.nameInput);
      marker.Htab2.appendChild(document.createElement("br"));
      marker.Htab2.appendChild(document.createTextNode("Price: "));
      marker.Htab2.priceInput = document.createElement("input");
        marker.Htab2.priceInput.setAttribute("type","text");
        if (marker.Pprice != null) {marker.Htab2.priceInput.setAttribute("value",marker.Pprice)}
        else {marker.Htab2.priceInput.setAttribute("value","None")};
        marker.Htab2.appendChild(marker.Htab2.priceInput);
      marker.Htab2.appendChild(document.createElement("br"));
      marker.Htab2.appendChild(document.createTextNode("Link: "));
      marker.Htab2.linkInput = document.createElement("input");
        marker.Htab2.linkInput.setAttribute("type", "text");
        if (marker.Plink != null) {marker.Htab2.linkInput.setAttribute("value",marker.Plink)}
        else {marker.Htab2.linkInput.setAttribute("value","None")};
        marker.Htab2.appendChild(marker.Htab2.linkInput);
      
      marker.Htab3 = document.createElement("form");
        marker.Htab3.setAttribute("onsubmit","return false");
      marker.Htab3.appendChild(document.createTextNode("Descr: "));
      marker.Htab3.descrInput = document.createElement("textarea");
      marker.Htab3.descrInput.setAttribute("cols","30");
      if (marker.Pdescr != null) {marker.Htab3.descrInput.value = marker.Pdescr} else {marker.Htab3.descrInput.value = "None"};
      marker.Htab3.appendChild(marker.Htab3.descrInput);
                  
      marker.houseTabs = [
        new GInfoWindowTab("Photo", marker.Htab1),
        new GInfoWindowTab("About", marker.Htab2),
        new GInfoWindowTab("Descr", marker.Htab3)];
      
      GEvent.addListener(marker, "click", function() {
        this.openInfoWindowTabs(this.houseTabs, {maxWidth: 320});
      });
      
      GEvent.addListener(marker, "dragend", function() {
        var newcoords = this.getLatLng()
        this.oldPlat = this.lat;
        this.oldPlng = this.lng;
        this.Plat = newcoords.lat();
        this.Plng = newcoords.lng();
        this.changed = true});
      
      GEvent.addListener(marker, "infowindowbeforeclose", function() {
        if (this.Htab1.thumbInput.value != this.Pthumb)   {this.oldPthumb = this.Pthumb; this.Pthumb=this.Htab1.thumbInput.value; this.changed = true};
        if (this.Htab2.nameInput.value  != this.Pname)    {this.oldPname = this.Pname; this.Pname = this.Htab2.nameInput.value; this.changed = true};
        if (this.Htab2.priceInput.value != this.Pprice)   {this.oldPprice = this.Pprice; this.Pprice = this.Htab2.priceInput.value; this.changed = true};
        if (this.Htab2.linkInput.value != this.Plink) {this.changed = true};
        if (this.Htab3.descrInput.value != this.Pdescr) {this.oldPdescr = this.Pdescr; this.Pdescr = this.Htab3.descrInput.value; this.changed = true};
        if (this.deleted == true)    {this.changed = true};
      });
      
    } else if (type == "geophoto") {
    marker.Htab1 = document.createElement("form");
      marker.Htab1.setAttribute("onsubmit","return false");
    marker.Htab1.appendChild(document.createTextNode("Name: "));
    marker.Htab1.nameInput = document.createElement("input");
      marker.Htab1.nameInput.setAttribute("type","text");
      if (marker.Pname != null) {marker.Htab1.nameInput.setAttribute("value",marker.Pname)}
      else {marker.Htab1.nameInput.setAttribute("value","None")};
      marker.Htab1.appendChild(marker.Htab1.nameInput);
    marker.Htab1.appendChild(document.createElement("br"));
    marker.Htab1.appendChild(document.createTextNode("Link: "));
    marker.Htab1.linkInput = document.createElement("input");
      marker.Htab1.linkInput.setAttribute("type","text");
      if (marker.Plink != null) {marker.Htab1.linkInput.value = marker.Plink} else {marker.Htab1.linkInput.value = "None"};
      marker.Htab1.appendChild(marker.Htab1.linkInput);
    marker.Htab1.appendChild(document.createElement("br"));
    marker.Htab1.appendChild(document.createTextNode("Thumb: "));
    marker.Htab1.thumbInput = document.createElement("input");
      marker.Htab1.thumbInput.setAttribute("type","text");
      if (marker.Pthumb != null) {marker.Htab1.thumbInput.value = marker.Pthumb} else {marker.Htab1.thumbInput.value = "None"};
      marker.Htab1.appendChild(marker.Htab1.thumbInput);
    marker.Htab1.appendChild(document.createElement("br"));
    marker.Htab1.appendChild(document.createTextNode("Descr: "));
    marker.Htab1.dI = document.createElement("input");
//      marker.Htab1.dI.setAttribute("cols","30");
//      marker.Htab1.dI.setAttribute("rows","2");
      if (marker.Pdescr != null) {marker.Htab1.dI.value = marker.Pdescr} else {marker.Htab1.dI.value = "None"};
      marker.Htab1.appendChild(marker.Htab1.dI);
    marker.Htab1.appendChild(document.createElement("br"));
    marker.Htab1.appendChild(document.createTextNode("Creator: "));
    marker.Htab1.cIn = document.createElement("input");
      marker.Htab1.cIn.setAttribute("type","text");
      if (marker.Pcreator != null) {marker.Htab1.cIn.value = marker.Pcreator} else {marker.Htab1.cIn.value = "None"};
      marker.Htab1.appendChild(marker.Htab1.cIn);
    marker.Htab1.appendChild(document.createElement("br"));
      marker.Htab1.delBtn = document.createElement("button");
        marker.Htab1.delBtn.setAttribute("type", "Button");
        marker.Htab1.delBtn.appendChild(document.createTextNode("Delete"));
        marker.Htab1.delBtn.onclick = function(){marker.remove()};
        marker.Htab1.appendChild(marker.Htab1.delBtn);
        marker.Htab1.undoBtn = document.createElement("button");
        marker.Htab1.undoBtn.setAttribute("type", "Button");
        marker.Htab1.undoBtn.appendChild(document.createTextNode("Undo"));
        marker.Htab1.appendChild(marker.Htab1.undoBtn);
      
      
    GEvent.addListener(marker,"click",function(){
      this.openInfoWindow(this.Htab1, {maxWidth: 320});
    });
    GEvent.addListener(marker, "dragend", function() {
      var newcoords = this.getLatLng();
      this.oldPlat = this.Plat;
      this.oldPlng = this.Plng;
      this.Plat = newcoords.lat();
      this.Plng = newcoords.lng();
      this.changed = true});
      
      GEvent.addListener(marker, "infowindowbeforeclose", function() {
        if (this.Htab1.nameInput.value != this.Pname)   {this.oldPname = this.Pname; this.Pname = this.Htab1.nameInput.value; this.changed = true};
        if (this.Htab1.linkInput.value  != this.Plink)    {this.oldPlink = this.Plink; this.Plink = this.Htab1.linkInput.value; this.changed = true};
        if (this.Htab1.thumbInput.value != this.Pthumb)   {this.oldPthumb = this.Pthumb; this.Pthumb = this.Htab1.thumbInput.value; this.changed = true};
        if (this.Htab1.dI.value != this.Pdescr) {this.oldPdescr = this.Pdescr; this.Pdescr = this.Htab1.dI.value; this.changed = true};
        if (this.Htab1.cIn.value != this.Pcreator) {this.oldPcreator = this.Pcreator; this.Pcreator =  this.Htab1.cIn.value; this.changed = true};
        if (this.deleted == true)    {this.changed = true};
    });
   }  else {
   // Default form for everything else.  Likely to contain tradesmen, shops etc so will need to contain:  name, descr, phone, link, that'll do for now.
   // Premium features - Display your rating, appear at the top of search results, we maintain your listing with up-to-date information, email all users, more pictures, opening hours
   marker.Htab = document.createElement("form");
     marker.Htab.setAttribute("onsubmit", "return falase");
   marker.Htab.appendChild(document.createTextNode("Name:  "));
   marker.Htab.nameInput = document.createElement("input");
     marker.Htab.nameInput.value = marker.Pname;
     marker.Htab.appendChild(marker.Htab.nameInput);
     marker.Htab.appendChild(document.createElement("br"));
   marker.Htab.appendChild(document.createTextNode("Descr: "));
   marker.Htab.dI = document.createElement("input");
     marker.Htab.dI.value = marker.Pdescr;
     marker.Htab.appendChild(marker.Htab.dI);
     marker.Htab.appendChild(document.createElement("br"));
   marker.Htab.typeDropDown = document.createElement("select");
     var typeoption = document.createElement("option");
       typeoption.value = "None";
       typeoption.text = "None";
       marker.Htab.typeDropDown.appendChild(typeoption);
     for (var type in markerGroups){
       var typeoption = document.createElement("option");
       typeoption.value=type;
       typeoption.text=type;
       if (type != 'newmarker') {marker.Htab.typeDropDown.appendChild(typeoption)};
     };
   marker.Htab.appendChild(marker.Htab.typeDropDown);
   marker.Htab.appendChild(document.createElement("br"));
      marker.Htab.delBtn = document.createElement("button");
        marker.Htab.delBtn.setAttribute("type", "Button");
        marker.Htab.delBtn.appendChild(document.createTextNode("Delete"));
        marker.Htab.delBtn.onclick = function(){marker.remove()};
        marker.Htab.appendChild(marker.Htab.delBtn);
        marker.Htab.okBtn = document.createElement("button");
        marker.Htab.okBtn.setAttribute("type", "Button");
        marker.Htab.okBtn.appendChild(document.createTextNode("OK"));
        marker.Htab.okBtn.onclick = function(){marker.closeInfoWindow()};
        marker.Htab.appendChild(marker.Htab.okBtn);      
    GEvent.addListener(marker,"click",function(){
      this.openInfoWindow(this.Htab)
    });
    GEvent.addListener(marker, "dragend", function() {
      var newcoords = this.getLatLng()
      this.oldPlat = this.Plat;
      this.oldPlng = this.Plng;
      this.Plat = newcoords.lat();
      this.Plng = newcoords.lng();
      this.changed = true});
      
      GEvent.addListener(marker, "infowindowbeforeclose", function() {
        if (this.Htab.nameInput.value != this.Pname)   {this.oldPname = this.Pname; this.Pname = this.Htab.nameInput.value; this.changed = true};
        if (this.Htab.dI.value != this.Pdescr)   {this.oldPdescr = this.Pdescr; this.Pdescr = this.Htab.dI.value; this.changed = true};
        if (this.deleted == true)    {this.changed = true};
		    if ((this.Htab.typeDropDown.options[(this.Htab.typeDropDown.selectedIndex)].value) != "None") {this.oldPtype = this.Ptype; this.Ptype = this.Htab.typeDropDown.options[(this.Htab.typeDropDown.selectedIndex)].value; this.changed = true};
    });
   
   
   
   };
   
    

  mapper.map.addOverlay(marker);
  },
  
   
  ICONS: {
    {% for icon in icons %}
    "{{ icon.id }}" : {
      image: '/assets/map/icons/{{icon.image|escapejs}}',
      shadow: '/assets/map/icons/{{icon.shadow.image|escapejs}}',
      size: new GSize({{icon.width}},{{icon.height}}),
      shadowsize: new GSize({{icon.shadow.width}},{{icon.shadow.height}}),
      iconAnchor: new GPoint({{icon.anchor_x}},{{icon.anchor_y}}),
      infoWindowAnchor: new GPoint({{icon.window_anchor_x}},{{icon.window_anchor_y}})
    } {% if not forloop.last %},{% endif %}
    {% endfor %}
  },
  
 toggleGroup: function(type) {
   typeCheckbox = type+"Checkbox";
   if (document.getElementById(typeCheckbox).checked) {
     for (var i = 0; i < markerGroups[type].length; i++) {
       var marker = markerGroups[type][i];
         if (marker.deleted != true) {marker.show()};
     }
   }
   else {
     for (var i = 0; i < markerGroups[type].length; i++) {
       var marker = markerGroups[type][i];
       marker.hide();
     }
   }
 },
 
 toggleGroupAll: function() {
   if (!(document.getElementById('allCheckbox').checked)) {
     for (var type in markerGroups) {
       for (var i = 0; i < markerGroups[type].length; i++) {
         markerGroups[type][i].hide()
       };
       typeCheckbox = type+"Checkbox";
       document.getElementById(typeCheckbox).checked = false;
     }
   }
   else {
     for (var type in markerGroups) {
       for (var i = 0; i < markerGroups[type].length; i++) {
         if (marker = true) {if (marker.deleted != true) {markerGroups[type][i].show()}}; // if there *are* some markers then.....
       };
       typeCheckbox = type+"Checkbox";
       document.getElementById(typeCheckbox).checked = true;
     }
   }
 },
 
 saveAll: function() {
   form = document.getElementById("markerdata");
   form.addInput = function(action,data){
     var inp = document.createElement("input");
     inp.type = "hidden";
     inp.value = data;
     inp.name = action;
     this.appendChild(inp);
   };
   for (var type in markerGroups){
     for (var eachmarker in markerGroups[type]) {
       var amarker = markerGroups[type][eachmarker];
       if (amarker.changed) {
         if (amarker.deleted && amarker.Puid != "anewmarker"){
           form.addInput("delete",amarker.Puid);
         }
         else if (amarker.Puid == 'anewmarker' && amarker.deleted == false) {
           form.addInput("new",[amarker.Plat, amarker.Plng, amarker.Pname, amarker.Pdescr, amarker.Ptype].join("\34"));
         }
         else if (amarker.deleted == false && amarker.Puid != "anewmarker"){
           form.addInput("change", [amarker.Puid, amarker.Plat, amarker.Plng, amarker.Pname, amarker.Pdescr, amarker.Ptype, amarker.Pprice, amarker.Pcreator].join("\34"));
         };
       };
     };
     
   };
 },
 
 toggleScrollyZoom: function(isChecked) {
   if (isChecked) {
     mapper.map.enableScrollWheelZoom();
   }
   else {
     mapper.map.disableScrollWheelZoom();
   }; 
 }
}
</script>

</head>

  <body onload="mapper.load()" onunload="GUnload()">

<div id="loginbox">
      {% if not user.is_authenticated %}
        <a href="/login">Log in</a>&nbsp&nbsp|&nbsp&nbsp<a href="/signup/">Sign Up</a>&nbsp&nbsp|&nbsp&nbsp
      {% else %}
        Welcome back {{user.username|capfirst}}.  |  <a href="/mymarkers">Your Markers</a>  |  <a href="/logout">Logout</a>
      {% endif %}
      <form method="POST" action="/search"><input type="text" id="loginboxsearch" name="search_term" /><input id="loginboxsubmit" type="submit" value="Search" /></form>
    </div>
    <div id="hills"></div><div id="weather"></div><div class="top"><a href="/"><span>www.pottononline.net</span></a></div>

<hr />
 
 
<div class="col2" style="width: 22%;padding: 1%; text-align: justify; color: #000000; position: absolute; left: 0px; top: 220px;">
    {% include "map/default_pageleft.html" %}
</div>
<hr />


<div class="right" style="color: #000000;">
  <div id="map" style="width:100%; height:1000px; overflow: hidden;" >
    <div id="innerMap" style="width: 99%; height: 800px; overflow: hidden;background-color: #e5e3df; margin: 0.2%;" > </div>
    <div id="sidebar">
        <br />
        {% for mtype in markertypes %}
            <label title="{{mtype.name}}">
            <input type="checkbox" id="{{mtype.safename}}Checkbox" onclick="mapper.toggleGroup('{{mtype.safename}}')" CHECKED=CHECKED />
            {{mtype.name|truncatesmart:15}}
            </label>
            <br />
        {% endfor %}
        <p><input type="checkbox" id="allCheckbox" onclick="mapper.toggleGroupAll()" CHECKED=CHECKED/> All</p>
        <p><input type="checkbox" id="scrollyzoom" onclick="mapper.toggleScrollyZoom(this.checked)"  /> Scrolly Zoom</p>
    </div>
    </div>
    <form id="markerdata" action="/edit/save" method="post" onsubmit="return mapper.saveAll()">
      <input id="mysubmit" type="submit" value="save all">
    </form>
  </div>
</div>



<hr />

{% if bad_browser %}
<h2 style="background-color: red; padding: 5px;" >Please consider upgrading your web browser.  Internet Explorer version 6 (if that is what you're using) doesn't not support some modern internet standards.  
You should consider upgrading to Firefox available FOR FREE from here: <a href="http://www.mozilla-europe.org/en/firefox/">http://www.mozilla-europe.org/en/firefox/</a></h2>
{% endif%}

<hr/>
<div id="footer">
<!-- Google Tracking -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-3468586-2");
pageTracker._trackPageview();
} catch(err) {}</script>
</div>

<div class="bigoak">
  <span class="footer" ><a href="/">Home</a>  |  <a href="/about">About</a>  |  <a href="/advertise">Advertise</a>  |  <a href="/contact">Contact</a>  |  
  <a href="/logout">Logout</a>  |  <a href="/help_us">Can you help?</a>  |  <a href="/awards">Potton Awards</a> 
</div>
    
  </body>
</html>